<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>用户信息</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="6" style="text-align: center">
          <el-avatar
            class="avatar"
            :size="80"
            :src="userPture || headPic"
          ></el-avatar>
          <div class="username">
            <b class="sheng">{{ username }}</b>
            <p class="sheng">{{ deptFullData.name }}</p>
          </div>
          <div class="btns">
            <el-button type="primary" size="small" @click="handleEdit" plain
              >修改个人资料</el-button
            >
            <el-button type="primary" size="small" @click="handlePic" plain
              >设置头像</el-button
            >
          </div>
        </el-col>
        <el-col :span="6">
          <ul>
            <li>欢 迎 您：{{ username }}({{ account }})</li>
            <li>今 天 是：{{ today }}</li>
            <li>登录时间：{{ loginTime }}</li>
            <li>注册时间：{{ createTime }}</li>
            <li>系统版本：{{ version }}</li>
          </ul>
        </el-col>
        <el-col :span="6">
          <ul>
            <li>操作系统：{{ os }}</li>
            <li>浏览器版本：{{ browserVersions }}</li>
            <li>登录IP：{{ ipAddr }}</li>
            <li>登录次数：{{ loginVersion }}</li>
          </ul>
        </el-col>
        <el-col :span="6">
          <ul>
            <li>服务器名称：{{ severInfo.sys.computerName }}</li>
            <li>服务器IP：{{ severInfo.sys.computerIp }}</li>
            <li>总内存：{{ severInfo.mem.total }}G</li>
            <li>已用内存：{{ severInfo.mem.used }}G</li>
            <li
              >使用率：
              {{
                ((severInfo.mem.used / severInfo.mem.total) * 100).toFixed(2) +
                '%'
              }}
            </li>
          </ul>
        </el-col>
      </el-row>
    </el-card>

    <UserSetting />
    <AvatarSetting />
  </div>
</template>
<script>
import { openApiStatisticalDataServer } from '@/api/openApi'
import webinfo from '@/mixins/webinfo.js'
import userInfo from '@/mixins/userInfo.js'
import browserJudge from './browserJudge'
export default {
  mixins: [webinfo, userInfo, browserJudge],
  components: {
    UserSetting: () => import('./UserSetting.vue'),
    AvatarSetting: () => import('./AvatarSetting.vue'),
  },
  data() {
    return {
      browserVersions: this.browserJudge(),
      os: this.getOS(),
      today: this.getNow(),
      version: this.version,
      severInfo: {
        sys: {},
        mem: {},
      },
    }
  },
  mounted() {
    this.getSeverInfo()
  },
  methods: {
    getSeverInfo() {
      openApiStatisticalDataServer().then((res) => {
        this.severInfo = res.data.data[0]
      })
    },
    handleEdit() {
      this.$bus.$emit('showUserSetting', true)
    },
    handlePic() {
      this.$bus.$emit('showAvatarSetting')
    },
  },
}
</script>
<style scoped lang="scss">
</style>